import { Component, OnInit } from '@angular/core';
import { RequestService } from 'src/app/service/request.service';

@Component({
  selector: 'app-msite',
  templateUrl: './msite.component.html',
  styleUrls: ['./msite.component.scss'],
})
export class MsiteComponent implements OnInit {
  constructor(public request: RequestService) {}
  public geohash: string;                       // 经纬度
  public locationData: any;                     // 当前位置

  public msiteData: any;                       // nav数据
  public swiperList: Array<any> = [[], []];    // 处理好的navList
  public pNum: number;                         // nav页
  public actP = 0;                             // 当前nav页
  public shopsData: any;                       // shops数据|附近商家


  ngOnInit(): void {
    // 请求：nav数据：
    const navUrl = 'index_category';
    if (!localStorage.getItem('swiperList')) {
      this.request.getData(navUrl).subscribe((res) => {
        this.msiteData = res.data;
        console.log('msite数据请求：', this.msiteData);

        // 数据处理 swiperList:
        const len = this.msiteData.length;
        console.log('len:', len);
        const n = len % 8 !== 0 ? 1 : 0;
        this.pNum = len / 8 + n;
        console.log('pNum:', this.pNum);
        let lNum = 8;
        let index = 0;
        for (let i = 0; i < this.pNum; i++) {
          if (i === this.pNum - 1) {
            lNum = len - i * 8;
          }
          for (let j = 0; j < lNum; j++) {
            this.msiteData[index].image_url = 'assets' + this.msiteData[index].image_url;
            this.swiperList[i].push(this.msiteData[index++]);
          }
        }
        console.log('swiperList:', this.swiperList);
        localStorage.setItem('swiperList', JSON.stringify(this.swiperList));        // 将swiperList存入localStorage
        localStorage.setItem('msiteData', JSON.stringify(this.msiteData));        // 将swiperList存入localStorage
      });
    } else {
      this.swiperList = JSON.parse(localStorage.getItem('swiperList'));
    }

    // 请求：通过经纬度获取位置详情
    this.geohash = '40.10038,116.36867';
    const url = 'position/' + this.geohash;
    // 请求数据（根据经纬度获取数据）
    if (!localStorage.getItem('orderData')) {
      this.request.getData(url).subscribe((res) => {
        this.locationData = res.data;
        console.log('location数据请求：', this.locationData);

        // 数据处理
        /** */

        localStorage.setItem('locationData', JSON.stringify(this.locationData));        // 将swiperList存入localStorage
      });
    }else{
      this.locationData = JSON.parse(localStorage.getItem('locationData'));
    }


    // 请求：shop数据
    const shopUrl = 'shops';
    if (!localStorage.getItem('shopsData')) {
      this.request.getData(shopUrl).subscribe((res) => {
        this.shopsData = res.data;
        console.log('shopsData数据请求：', this.shopsData);
        // 数据处理
        /** */
        localStorage.setItem('shopsData', JSON.stringify(this.shopsData));        // 将shopsData存入localStorage
      });
    }else{
      this.shopsData = JSON.parse(localStorage.getItem('shopsData'));
    }

    console.log(this.shopsData);
  }


  /**
   * @function swip(i) 点击按钮切换nav页
   * @param i 当前nav页id
   */
  swip(i: number): void{
    this.actP = i;
    console.log(i);
  }

}



// 请求（练习代码）
// export class MsiteComponent implements OnInit {
//   constructor(public request: RequestService) { }

//   name = '';
//   ngOnInit(): void {

//   // 1.同步
//   const data = this.request.getData();
//   console.log('同步调用无法获取异步数据：', data);

//   // 2.异步获取：callback
//   this.request.getCalbackData((name: any) => {
//     console.log(name);
//   });
//   // 3.异步获取：promise
//   const promiseData = this.request.getPromiseData();
//   promiseData.then((datas) => {
//     console.log(datas);
//   });
//   // // 4.异步获取：rxjs
//   // const rxjsData = this.request.getRxjsData();
//   // // tslint:disable-next-line: no-shadowed-variable
//   // rxjsData.subscribe((rxjsData: any) => {
//   //   console.log(rxjsData);
//   // });

//   // 4.1异步获取：rxjs取消订阅
//   const deRxjsData = this.request.getRxjsData();
//   // tslint:disable-next-line: no-shadowed-variable
//   const d = deRxjsData.subscribe((rxjsData: any) => {
//     console.log('被取消的rxjs数据：', rxjsData);
//   });

//   setTimeout(() => {
//     d.unsubscribe();    // 取消订阅：
//   }, 1000);

//   // 5.stream
//   const stream = this.request.getStreamData();
//   const s = stream.subscribe((sdata: any) => {
//     console.log('不断获取的rxjs数据：', sdata);
//   });
//   setTimeout(() => {
//     s.unsubscribe();    // 3秒后取消订阅：
//   }, 3000);
// }
//
// }
